<template>
  <div class="cont">
    <div>
      <input type="checkbox" @click="AllCheck" :checked="isAll" />
      已完成{{ fullAll }} / 全部{{ todos.length }}
    </div>
    <button @click="allUpdate">清除已完任务</button>
  </div>
</template>

<script>
export default {
  name: 'FooterF',
  methods: {
    // 清除已完任务
    allUpdate() {
      this.todos.filter(item=> {
        if(item.done == true){
          this.detleteAll(item.id)
        }
      })
    },
    // 全选传id
    AllCheck() {
      this.AllCheck1(this.fullAll)
    }
  },
  data() {
    return {
      allC: false,
    }
  },
  props: ['todos', 'AllCheck1','detleteAll'],
  computed: {
    // 选中任务
    fullAll() {
      let i = 0
      this.todos.forEach((item) => {
        if (item.done) i++
      })
      return i
    },
    // 根据总长度进行true、false
    isAll(){
      return this.fullAll === this.todos.length && this.todos.length > 0
    }
  }
}
</script>

<style scoped>
.cont {
  width: 600px;
  height: 30px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  width: 100px;
  height: 30px;
  background-color: tomato;
  border: 1px solid #ccc;
  color: white;
}
</style>